<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }

    .environment {
      margin: 8px 0;
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
    }

    .environment:hover {
      background-color: #f0f0f0;
    }

    .environment.active {
      border-color: #4285f4;
      background-color: #e8f0fe;
    }

    .title {
      font-weight: bold;
      margin-bottom: 10px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="title">选择API环境</div>
  <div id="environments">
    <div class="environment" data-url="https://api.production.com/">生产环境</div>
    <div class="environment" data-url="https://console-gms-api-dev.ntplat.com">测试环境</div>
    <div class="environment" data-url="https://console-gms-api-qa.ntplat.com">开发环境</div>
    <div class="environment" data-url="http://localhost:3000/">本地环境</div>
  </div>

  <script src="popup.js"></script>
</body>

</html>